
<template>
  <div>
    <z-space vertical>
      <h3>form</h3>

      <z-form-template
         :slots="search.slots"
         :def="search.def"
          ref="searchForm"
         @fire="search.onFire"
         @ready="onFormReady"
      >
      </z-form-template>


      <vue-code-mirror :tpl="def.tpl" :js="def.js"></vue-code-mirror>
    </z-space>
  </div>
</template>

<script>
import {
  FormInput,
  FormInputNativeNumber,
  FormInputNativeInteger,
  FormSelect,
  FormRadio,
  FormCheckbox, FormBase, FormTextarea
} from "@/zpkgs/hooks/form";
import VueCodeMirror from "@example/components/VueCodeMirror";

export default {
  components: {VueCodeMirror},
  data() {
    return {

    }
  },
  setup() {
    const {reactive} = globalThis.vueCompositionAPI
    let search =  {
      slots: {
        object_beforeend: `
<z-space style="margin-left: 10px;">
<el-button @click="zform__callEvent('form-submit', scope, $event)"">提交</el-button>
<el-button @click="zform__reset(scope, $event)"">重置</el-button>

</z-space>
`
      },
      def: {
        ui: {
          globals: {
            // readonly: true
            disabled: true
          },
          attrs: Object.entries({
            'test-attr': 1,
          })
        },
        properties: {
          text: {
            ...FormInput('文字'),
            rules: [],
          },
          maxText: {
            ...FormInput('最长10个文字', {
              widgetConfig: {
                maxlength: 10
              }
            }),
            rules: [],
          },
          number: {
            ...FormInputNativeNumber('数字'),
            rules: [],
          },
          integer: {
            ...FormInputNativeInteger('整数'),
            rules: [],
          },
          select: {
            ...FormSelect('下拉', {
              options: [
                {
                  label: '选项1',
                  value: 'option1',
                },
                {
                  label: '选项2',
                  value: 'option2',
                }
              ]
            }),
            rules: [],
          },
          radio: {
            ...FormRadio('单选', {
              options: [
                {
                  label: '选项1',
                  value: 'option1',
                },
                {
                  label: '选项2',
                  value: 'option2',
                }
              ]
            }),
            rules: [],
          },
          checkbox: {
            ...FormCheckbox('多选', {
              options: [
                {
                  label: '选项1',
                  value: 'option1',
                },
                {
                  label: '选项2',
                  value: 'option2',
                }
              ]
            }),
            rules: [],
          },
          startTime: {
            ...FormBase('日期时间', {
              ui: {
                widget: 'CusDateTimePicker'
              }
            }),
            rules: [],
          },
          actDate: {
            ...FormBase('活动日期', {
              ui: {
                widget: 'CusDatePicker',
                wrap_start_tag: 'el-row',
                wrap_start_tag_attr: `style="display: flex;"`
              }
            }),
            rules: [],
          },
          actTime: {
            ...FormBase(' - ', {
              ui: {
                widget: 'CusTimePicker',
                form_item: {
                  labelWidth: '30px'
                },
                wrap_end_tag: 'el-row',
              }
            }),
            rules: [],
          },
          textarea: {
            ...FormTextarea('评论', {

            }),
            rules: [],
          },
        },
      },
      onFire([type, args, ctx] = []) {
        // console.log(type, args, ctx)
        let d = ctx.getRawData()
        console.log(d)
      }
    }

    let state = reactive({
      inline: false
    })

    let def = {
      tpl:
`
<z-form-template
   :slots="search.slots"
   :def="search.def"
    ref="searchForm"
   @fire="search.onFire"
>
</z-form-template>
`,
      js: `search = ${ZY.JSON5.stringify(search, null, 2)};

search.onFire = function([type, args, ctx] = []) {
  // console.log(type, args, ctx)
  let d = ctx.getRawData()
  console.log(d)
}
      `
    }

    function onFormReady({ctx}) {
      let form = ctx.getCurForm()
      // console.log(form)
      form.importData({
        select: 'option1',
        radio: 'option1',
      })
    }

    let doc = {
      props: [
        {
          name: 'def',
          type: 'Object',
          defVal: '{columns: [], records: []}',
          desc: '定义'
        }
      ]
    }

    return {
      search,
      onFormReady,
      def,
      state,
    }
  }
}
</script>
